<template>
  <view>
    <view v-for="(item, index) of formatList" :key="index">
      <view class="card tn-padding-sm tn-margin-sm">
        <view @click="edit(item,index)">
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">吨数:</text>
            <text class="value tn-text-lg">{{ item.hwyzTons }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">收费标准:</text>
            <text class="value  tn-text-lg">{{ item.hwyzChargingStandard }}
              <text class="tn-color-gray">元/车次</text>
            </text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">上浮20%:</text>
            <text class="value  tn-text-lg">{{ item.hwyzIsUp }}</text>
          </view>
          <view class="tn-flex tn-flex-row-between">
            <text class="label tn-form-item">小计:</text>
            <text class="value  tn-text-lg">{{ item.hwyzSubtotal }}</text>
          </view>
        </view>
        <view class="tn-flex tn-flex-direction-row-reverse tn-margin-top-sm">
          <tn-button style="margin-left: 10px;" @click="dcDelete(index)" backgroundColor="tn-bg-red"
                     fontColor="tn-color-white">删除
          </tn-button>
        </view>
      </view>
    </view>

    <view class="tn-flex tn-flex-row-center tn-text-bold tn-text-lg label">
      <text class="tn-form-item">小计:</text>
      <text class="tn-form-item"> {{ listTotal }}</text>
    </view>

    <view class="tn-flex tn-flex-row-center tn-padding-xl" v-if="formatList.length<2">
      <tn-button @click="add" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">添加
      </tn-button>
    </view>


    <tn-popup v-model="popShow" mode="bottom">
      <view class="card tn-padding-sm tn-margin-sm">
        <tn-form :model="form" ref="form" :labelWidth="220" :errorType="['message', 'toast']">
          <tn-form-item label="吨数：" prop="hwyzTons">
            <tn-input v-model="form.hwyzTons" type="number"/>
          </tn-form-item>
          <tn-form-item label="收费标准：" prop="hwyzChargingStandard">
            <tn-input v-model="form.hwyzChargingStandard"/>
            <text class="tn-color-gray">元/车次</text>
          </tn-form-item>
          <tn-form-item label="上浮20%：" prop="hwyzIsUp">
            <tn-radio-group v-model="form.hwyzIsUp">
              <tn-radio v-for="(item, index) in isUpLst" :key="index" :name="item.name">
                {{ item.name }}
              </tn-radio>
            </tn-radio-group>
          </tn-form-item>
          <tn-form-item label="小计：" prop="hwyzSubtotal">
            <tn-input type="number" v-model="form.hwyzSubtotal"/>
          </tn-form-item>
        </tn-form>
      </view>
      <view class="tn-flex tn-flex-row-center tn-padding-xl">
        <tn-button @click="save" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
        </tn-button>
      </view>

    </tn-popup>
  </view>

</template>
<script>
import {calc} from "a-calc/es";
import {isUpLst} from "@/static/mock/diaoche";
import {toast} from "@/utils/common";

export default {
  name: "huowuzhuanyunCom",
  watch: {
    // 货物转运费 - 数量
    'form.hwyzTons'(val) {
      if (val) {
        !this.form.hwyzIsUp && (this.form.hwyzIsUp = '否')
        if (val < 5) {
          this.form.hwyzChargingStandard = 500;
        } else if (val <= 10) {
          this.form.hwyzChargingStandard = 1000;
        } else if (val > 10) {
          this.form.hwyzChargingStandard = 1500;
        }
      }
      this.getHuoWuZhuanYun()
    },
    // 货物转运费 - 上浮
    'form.hwyzIsUp'() {
      this.getHuoWuZhuanYun()
    },
    // 货物转运费 - 收费标准
    'form.hwyzChargingStandard'() {
      this.getHuoWuZhuanYun()
    },
    "formatList": {
      handler(val) {
        let total = 0;
        val.forEach(item => {
          total += +item.hwyzSubtotal
        })
        this.listTotal = total
        this.$emit('update:total', total)
      }
    }
  },
  data() {
    return {
      isUpLst,
      viewType: 'add',
      popShow: false,
      listTotal: 0,
      formatList: [],
      form: {
        hwyzTons: '',
        hwyzChargingStandard: '',
        hwyzIsUp: '',
        hwyzSubtotal: 0,
      }
    }
  },
  methods: {
    add() {
      this.viewType = 'add'
      this.popShow = true;
      this.form = {
        hwyzTons: '',
        hwyzChargingStandard: '',
        hwyzIsUp: '',
        hwyzSubtotal: 0,
      }
    },
    edit(item,index) {
      this.viewType = 'edit'
      this.popShow = true;
      this.form = {...item,index};
    },
    save() {
      if(!(+this.form.hwyzSubtotal)){
        return  toast('请填写小计!')
      }
      if (this.viewType === 'add') {
        this.formatList.push(this.form)
        this.$emit('collapseInit')
      } else {
        this.formatList[this.form.index] = {...this.form}
        this.formatList = [...this.formatList]
      }
      this.popShow = false
    },
    dcDelete(index) {
      this.formatList.splice(index, 1)
      this.$emit('collapseInit')
    },
    dcCancel() {
      if (!+this.form.dcSubtotal) {
        this.form = {
          hwyzTons: '',
          hwyzChargingStandard: '',
          hwyzIsUp: '',
          hwyzSubtotal: 0,
        }
      }
    },
    // 货物转运费
    getHuoWuZhuanYun() {
      if (this.form.hwyzTons) {
        this.form.hwyzSubtotal = calc(`
				${this.form.hwyzChargingStandard || 0}
				* (${this.form.hwyzIsUp === '是' ? 1.2 : 1})
			`)
      } else {
        this.form.hwyzIsUp = ''
        this.form.hwyzChargingStandard = '';
        this.form.hwyzSubtotal = ''
      }
    },
  },
}
</script>
<style scoped lang="scss">
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.label {
  font-weight: 700;
  line-height: 32px;
}
</style>
